<template>
  <div id="app">
   <Login v-if="islogin"></Login>
     <div id="nave">
	   <h1><span class="glyphicon glyphicon-home"></span>管理系统</h1>
	   <ul id="fw">
	       <li v-for="(item,index) in items"  v-on:click="den(index)" :class="{Pactive:index == isActive,brforeP:true}">
		       <p>{{item.typs}}<p/>
		   </li>
	   </ul>
	 </div>
	 <div id="main">

	  <router-view></router-view>
	 </div>
   
  </div>
</template>

<script>
import Login from "./components/Login.vue"
export default {
  data(){
     return {
	   items:[{typs:"员工管理",paths:"/"},{typs:"城市管理",paths:"/crity"},{typs:"路线管理",paths:"/Way"},{typs:"站点管理",paths:"/Site"}],
	   isActive:0
	 }
  },
  components:{
     Login
  },
  computed:{
      islogin(){
	      return this.$store.state.islogin
	  }
  },
  methods:{
      den(ins){
	     this.isActive = ins
		 this.$router.push({
		    path:this.items[ins].paths
		 })
	  }
  }
}
</script>

<style>
*{margin:0;padong:0;}
li{list-style:none;}

body{
   font-size:10px;
}
   #nave{
       width:15%;
	   height:100vh;
	   background:#2c3a4a;
	   float:left;
   }
   #nave h1{
      color:#ffffff;
	  border-bottom:2px solid #cccccc;
	  height:6vh;
	  text-align:center;
   }
   #nave h1 span{
      margin-right:1vw;
   }
   #main{
       width:85%;
	   height:100vh;
	   background:red;
	   float:left;
   }
   #fw li{
   font-size:2rem;
   
   height:8vh;
   width:100%;
   line-height:8vh;
   }
   .brforeP{
      color:#ffffff;
   }
   .Pactive{
       color:#2490e5;
   }
</style>
